import React from 'react'

class ArticleUserHeader extends React.Component {
    splitDate(str) {
        const len = str.split('').length - 8
        const str1 = str.substring(0, len)
        let arr = []
        for (let i of str1.split('')) {
            if (i < 'A' || i > 'Z') {
                arr.push(i)
            } else {
                arr.push(' ')
            }
        }
        return arr.join('')
    }

    render() {
        return (
            <div className="article-list-header">
                {this.props.user ? <img className="userLogo-list"
                    src={this.props.user ? this.props.user.image.thumbPath : null} /> : null}
                <span className="userName-list">{this.props.user ? this.props.user.username : null}</span>
                <span
                    className="Time-list">{this.props.blog ? this.splitDate(this.props.blog.createdAt) : null}</span>
                <style>{`
                    .article-list-header{
                        display: flex;
                        align-items: center;
                    }
                    .userLogo-list{
                        width: 25px;
                        height: 25px;
                        box-shadow: 1px 1px 1px 1px #f6f3f3;
                        border-radius: 50%;
                    }
                   .userName-list{
                        margin: 0 10px;
                        font-size: 13px;
                    }
                    .Time-list{
                        font-size: 13px;
                        color: #b1b1b1;
                    }
                `}</style>
            </div>
        )
    }
}

export default ArticleUserHeader